<template>
	<view class="con">
		<template v-if="viewWidth">
			<movable-area class="area" :style="{ height: areaHeight }">
				<movable-view v-for="(item, index) in imageList" :key="item.id" class="view" direction="all" :y="item.y"
					:x="item.x" :damping="40" :disabled="item.disable" @change="onChange($event, item)"
					@touchstart="touchstart(item, $event)" @mousedown="touchstart(item, $event)"
					@touchend="touchend(item)" @mouseup="touchend(item)" :style="{
            width: viewWidth + 'px', 
            height: viewWidth + 'px', 
            'z-index': item.zIndex, 
            opacity: item.opacity 
          }" @dragover.prevent @drop.prevent>
					<view class="area-con" :style="{
              width: childWidth, 
              height: childWidth, 
              borderRadius: borderRadius + 'rpx',
              transform: 'scale(' + item.scale + ')' 
            }">
						<image class="pre-image" :src="item.src" mode="aspectFill"></image>
						<view class="del-con" @click="delImages(item, index)" @touchstart.stop="nothing()"
							@touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
							<view class="del-wrap">
								<image class="del-image" src="data:image/png;base64,..."></image>
							</view>
						</view>
					</view>
				</movable-view>
				<view class="add" v-if="imageList.length < number"
					:style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }"
					@click="addImages">
					<view class="add-wrap"
						:style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
						<image style="width: 54rpx;height: 54rpx;" src="data:image/png;base64,..."></image>
					</view>
				</view>
			</movable-area>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			value: Array,
			modelValue: Array,
			keyName: String,
			number: {
				type: Number,
				default: 12
			},
			imageWidth: {
				type: Number,
				default: 0
			},
			cols: {
				type: Number,
				default: 3
			},
			borderRadius: {
				type: Number,
				default: 0
			},
			padding: {
				type: Number,
				default: 10
			},
			scale: {
				type: Number,
				default: 1.1
			},
			opacity: {
				type: Number,
				default: 0.7
			},
			addImage: Function,
			delImage: Function
		},
		data() {
			return {
				imageList: [],
				width: 0,
				add: {
					x: 0,
					y: 0
				},
				colsValue: 0,
				viewWidth: 0,
				tempItem: null,
				changeStatus: true,
				preStatus: true,
				first: true,
			}
		},
		computed: {
			areaHeight() {
				let height = '';
				if (this.imageList.length < this.number) {
					height = (Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth).toFixed() + 'px';
				} else {
					height = (Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth).toFixed() + 'px';
				}
				return height;
			},
			childWidth() {
				return this.viewWidth - this.rpx2px(this.padding) * 2 + 'px';
			}
		},
		methods: {
			touchstart(item, event) {
				event.preventDefault(); // 阻止默认的拖动行为
				item.zIndex = 100;
				item.opacity = this.opacity;
			},
			touchend(item) {
				item.zIndex = 1;
				item.opacity = 1;
			},
			onChange(event, item) {
				item.x = event.detail.x;
				item.y = event.detail.y;
			},
			addImages() {
				// 添加图片逻辑
			},
			delImages(item, index) {
				// 删除图片逻辑
			},
			nothing() {
				// 阻止默认行为
			},
			rpx2px(rpx) {
				return rpx * (this.width / 750);
			}
		}
	}
</script>

<style scoped>
	.con {
		position: relative;
	}

	.area {
		position: relative;
	}

	.view {
		position: absolute;
	}

	.area-con {
		position: relative;
	}

	.pre-image {
		width: 100%;
		height: 100%;
	}

	.del-con {
		position: absolute;
		top: 0;
		right: 0;
	}

	.add {
		position: absolute;
	}

	.add-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>